import { FC, useState, useEffect } from 'react';
import { useHistory, useLocation } from 'react-router';
import styles from './style.less';
import classnames from 'classnames';
interface tabItem {
  title: string;
  path: string;
}
const tabArr: tabItem[] = [
  {
    title: '产业预警',
    path: '/app/fxyj/cyyj',
  },
  {
    title: '园区预警',
    path: '/app/fxyj/yqyj',
  },
  {
    title: '企业预警',
    path: '/app/fxyj/qyyj',
  },
];
const EarlyWarning: FC = (props) => {
  const history = useHistory();
  const location = useLocation();
  const [currentNum, setCurrentNum] = useState<Number>(0);
  const changeCurrentNum = (pathname: string) => {
    switch (pathname) {
      case '/app/fxyj/cyyj':
        setCurrentNum(0);
        break;
      case '/app/fxyj/yqyj':
        setCurrentNum(1);
        break;
      case '/app/fxyj/qyyj':
        setCurrentNum(2);
        break;
    }
  };
  useEffect(() => {
    changeCurrentNum(location.pathname);
  }, [location]);
  return (
    <div className={styles.earlywarning_container}>
      <div className={styles.header_tab}>
        {tabArr.map((item: tabItem, index: number) => (
          <div
            className={classnames(
              styles.tab_item,
              currentNum === index ? styles.actived : null,
            )}
            key={index}
            onClick={() => history.push(item.path)}
          >
            {item.title}
          </div>
        ))}
      </div>
      <div>{props.children}</div>
    </div>
  );
};

export default EarlyWarning;
